<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 导航菜单上的湖大logo -->
      <el-header class="header shadow">
        <!-- Header content -->
        <div class="left-logo" @click="toStudentHomePage()">
          <img src="../../assets/imgs/home/hubu_logo.png" alt="">
        </div>

        <div class="right-bar">
          <div class="bar-title">
            教务系统
          </div>
        </div>

        <!-- 用户管理区 -->
        <div class="user-info">
          <!-- <img src="" alt=""> -->
          <i class="el-icon-s-custom"></i>

          <el-dropdown trigger="click">
            <!-- <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span> -->
            <div class="user el-dropdown-link">{{ loginUser }}</div>
            <div class="arrow el-icon-caret-bottom"></div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="editUserPassword()">修改密码</el-dropdown-item>
              <el-dropdown-item divided @click.native="editUserInfo(current_User)">修改个人信息</el-dropdown-item>
              <el-dropdown-item divided @click.native="Logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-dialog
        title="修改用户密码"
        :visible.sync="editPasswordDialog"
        width="30%"
        :before-close="handleClose">
        <el-form :model="currentUser" ref="editPasswordForm" :rules="editPasswordRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input type="password" v-model="currentUser.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="currentUser.newPassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editPasswordSubmit()">确认</el-button>
            <el-button @click="editPasswordDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog
        title="修改个人信息"
        :visible.sync="editUserDialog"
        width="30%"
        :before-close="handleClose">
        <el-form :model="current_User" ref="editUserForm" :rules="editUserRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="current_User.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="current_User.sex" placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族" prop="nationality">
            <el-input v-model="current_User.nationality"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="id_num">
            <el-input v-model="current_User.id_num"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-input v-model="current_User.birthday"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="telephone">
            <el-input v-model="current_User.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮件地址" prop="email">
            <el-input v-model="current_User.email"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="native_place">
            <el-input v-model="current_User.native_place"></el-input>
          </el-form-item>
          <el-form-item label="政治面貌" prop="political_status">
            <el-select v-model="current_User.political_status" placeholder="请选择">
              <el-option label="共青团员" value="共青团员"></el-option>
              <el-option label="共产党员" value="共产党员"></el-option>
              <el-option label="群众" value="群众"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="current_User.address"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="educational_background">
            <el-select v-model="current_User.educational_background" placeholder="请选择">
              <el-option label="本科在读" value="本科在读"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserSubmit()">确认</el-button>
            <el-button @click="editUserDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- Main content -->
      <!-- 这里写入一个router的占位符，用来动态调整主体内容 -->
      <router-view></router-view>

    </el-container>
  </div>
</template>

<script>
import { getAllMajors, getAllSchools } from '@/utils/dropdown.js'
export default {
  data () {
    var checkIdNum = (rule, value, cb) => {
      // 教的unicode码就是\u6559
      const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/

      if (reg.test(value)) {
        return cb()
      }

      cb(new Error('请输入正确的身份证号码!'))
    }
    var checkPhoneNum = (rule, value, cb) => {
      // 教的unicode码就是\u6559
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/

      if (reg.test(value)) {
        return cb()
      }

      cb(new Error('请输入正确的手机号号码!'))
    }
    var checkEmail = (rule, value, cb) => {
      // 教的unicode码就是\u6559
      const reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/

      if (reg.test(value)) {
        return cb()
      }

      cb(new Error('请输入正确的邮箱格式!'))
    }
    var checkDay = (rule, value, cb) => {
      const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/

      if (reg.test(value)) {
        return cb()
      }

      cb(new Error('请输入正确的邮箱格式!'))
    }

    return {
      menuList: [
        {
          id: '1',
          name: '用户管理',
          path: '/manager/course'
        }, {
          id: '2',
          name: '课程管理'
        }, {
          id: '3',
          name: '考试管理'
        }, {
          id: '4',
          name: '系统管理'
        }
      ],
      iconsObject: {
        1: 'el-icon-user',
        2: 'el-icon-edit-outline',
        3: 'el-icon-tickets',
        4: 'el-icon-setting'
      },
      isCollapse: false,
      activeMenu: '用户管理',
      loginUser: '您好',
      currentUser: {},
      current_User: {},
      editPasswordDialog: false,
      //表单验证
      editPasswordRules: {
        oldPassword: [
          { required: true, message: '旧密码输入错误！', trigger: 'blur'}
        ],
        newPassword: [
          { required: true, message: '新密码不能为空！', trigger: 'blur'}
        ],
      },
      editUserDialog: false,
      majorList: [],
      schoolList: [],
      editUserRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        studentNum: [
          { required: true, message: '请输入学号', trigger: 'blur'}
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'change'}
        ],
        nationality: [
          { required: true, message: '请输入民族', trigger: 'blur'}
        ],
        id_num: [
          { required: true, message: '请输入身份证号码', trigger: 'blur'},
          { validator: checkIdNum, trigger: 'blur'}
        ],
        birthday: [
          { required: true, message: '请输入生日', trigger: 'blur'},
          { validator: checkDay, trigger: 'blur'}
        ],
        telephone: [
          { required: true, message: '请输入手机号码', trigger: 'blur'},
          { validator: checkPhoneNum, trigger: 'blur'}
        ],
        email: [
          { required: true, message: '请输入邮件地址', trigger: 'blur'},
          { validator: checkEmail, trigger: 'blur'}
        ],
        native_place: [
          { required: true, message: '请输入籍贯', trigger: 'blur'},
        ],
        political_status: [
          { required: true, message: '请选择政治面貌', trigger: 'change'},
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur'},
        ],
        educational_background: [
          { required: true, message: '请选择学历', trigger: 'change'},
        ],
      },
    }
  },
  async created () {
    // console.log('')
    this.getSelfUserInfo ()
    this.majorList = await getAllMajors()
    this.schoolList = await getAllSchools()
  },
  methods: {
    Logout () {
      // 记得在这里删除token(登出就需要清除用户信息！)
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toSelectCourse () {
      this.$router.push('/student/myscore')
    },
    toStudentHomePage () {
      this.$router.push('/student/studenthomepage')
    },
    handleClose (done) {
      done()
    },
    editUserPassword () {
      this.editPasswordDialog = true
    },
    editPasswordSubmit () {
      this.currentUser.oldPassword = this.currentUser.oldPassword
      this.currentUser.newPassword = this.currentUser.newPassword
      this.$refs.editPasswordForm.validate(async valid => {
      if (!valid) return
      const { data: res } = await this.$http.post(`user/all/updatePassword?oldPassword=${this.currentUser.oldPassword}&newPassword=${this.currentUser.newPassword}`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.$message.success('修改成功！')
      this.editStudentDialog = false
        })
    },
    editUserInfo (current_User) {
      this.editUserDialog = true
      this.current_User = current_User
    },
    editUserSubmit () {
      this.current_User.idNum = this.current_User.id_num
      this.current_User.nativePlace = this.current_User.native_place
      this.current_User.politicalStatus = this.current_User.political_status
      this.current_User.educationalBackground = this.current_User.educational_background
      this.$refs.editUserForm.validate(async valid => {
      if (!valid) return
      const { data: res } = await this.$http.post(`user/updateSelfUser`, this.current_User)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.$message.success('修改成功！')
      this.editUserDialog = false
      // this.getSelfUserInfo ()
        })
    },
    async getSelfUserInfo () {
      const { data: res } = await this.$http.post(`user/getSelfMessage`, this.current_User)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.current_User = res.detail
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-header {
    // 根据整体的el-header来对右边的bar确定背景颜色
    background-color: #1E6F46;
    display: flex;
    align-items: center;
    color: #1E6F46;
    font-size: 20px;
    height: 80px !important;
    padding: 0;

    .left-logo {
      height: 100%;
      width: 250px;
      background-color: #1E6F46;
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      align-items: center;
      cursor: pointer;

      img {
        width: 100%;
      }
    }

    .right-bar {
      position: absolute;
      display: flex;
      align-items: center;
      width: 50%;
      left: 220px;
      height: 80px;
      // background-color: gold;
      color: black;
      margin-left: 30px;

      .elicon {
        font-size: 30px;
        color: #666666;
      }

      .bar-title {
        height: 50px;
        width: 160px;
        line-height: 50px;
        text-align: center;
        font-size: 35px;
        font-family: 宋体;
        font-weight: bold;
        color: white;
        border-left: 1px solid #ddd;
        // padding-left: 20px;
      }
    }

    .user-info {
      width: 100px;
      height: 60px;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      padding-left: 15px;

      > i {
        display: block;
        border-radius: 50%;
        background-color: white;
        font-size: 30px;
      }

      .el-dropdown {
        display: flex;
        align-items: center;

        .user {
          color: white;
          padding-left: 10px;
          font-size: 18px;
          cursor: pointer;
        }

        .arrow {
          color: white;
        }
      }
    }
  }

  .el-aside {
    background-color: #C0C4CC;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    padding: 0px;
  }

  .business-card {
      width: 100%;
      height: 150px;

      .business-title {
        width: 100px;
        height: 35px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: center;
        line-height: 35px;
        color: white;
        font-size: 15px;
        font-weight: bold;
        background-color: #1a6c46;
      }

      .el-row-business {
        margin: 10px;
      }

      .business-text {
          text-align: center;
          font-size: 5px;
        }

      .business-btn {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .img-div01 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FF6161;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div02 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FF9933;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div03 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #03A9F5;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div04 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #00DEBF;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .business-img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .row-card {
      margin: 10px;
      margin-bottom: 0px;
    }

    .col-card-left {
      margin-left: 10px;
    }

    .col-card-right {
      margin-right: 10px;
    }

    .title {
      font-size: 15px;
      font-weight: bold;
      color: #1a6c46;
    }

    .person-picture-div {
      width: 140px;
      height: 170px;
      border-width: 1px;
      border-style:solid;
      border-radius: 4px;
      border-color: rgb(201, 201, 201);

      .img-person {
        width: 140px;
        height: 170px;
        border-radius: 4px;
      }
    }

    .personinfo-div {
      line-height: 29px;

      .personinfo {
        color: rgb(121, 121, 121);
        font-size: 15px;
      }
    }
}
</style>
